import './index.css'
import { Button, Flex, Avatar, Input, Carousel  } from 'antd';
import React,{useRef,useState,useEffect} from 'react';
import { PlusOutlined, SearchOutlined, } from '@ant-design/icons';
let Soial = () => {
const [position, setPosition] = useState({ x: 100, y: 230 });  
  const triangleRef = useRef(null);  
  
  const handleMouseDown = (e) => {  
    function handleMouseMove(event) {  
      setPosition({  
        x: event.clientX - triangleRef.current.offsetWidth / 2,  
        y: event.clientY - triangleRef.current.offsetHeight / 2,  
      });  
    }  
  
    function handleMouseUp() {  
      document.removeEventListener('mousemove', handleMouseMove);  
      document.removeEventListener('mouseup', handleMouseUp);  
    }  
  
    document.addEventListener('mousemove', handleMouseMove);  
    document.addEventListener('mouseup', handleMouseUp);  
  };  

  




    return (
        <div>
                
                <Input prefix={<SearchOutlined />} style={{ width: '90%', height: '40px', margin: '20px' }} placeholder="Basic usage" />
                
                <div style={{width:'100%',height:'536px',overflowX:'hidden',
                  overflowY: 'scroll'
                }}>
                  
                  <Carousel arrows infinite={false} dots={false}>
      <div style={{width:'100%'}}>
                        <Button ghost style={{ margin: '10px' }} >长方形</Button>
                        <Button ghost style={{ margin: '10px' }} >横线</Button>
                        <Button ghost style={{ margin: '10px' }} >虚线</Button>
                        <Button ghost style={{ margin: '10px' }} >正方形</Button>        
      </div>
      <div>
                        <Button ghost style={{ margin: '10px' }} >抠图</Button>
                        <Button ghost style={{ margin: '10px' }} >竖线</Button>
                        <Button ghost style={{ margin: '10px' }} >定位</Button> 
                        <Button ghost style={{ margin: '10px' }} >直线</Button> 
      </div>
      <div>
                        <Button ghost style={{ margin: '10px' }} >地址</Button>
                        <Button ghost style={{ margin: '10px' }} >地点</Button>
                        <Button ghost style={{ margin: '10px' }} >加号</Button> 
                        <Button ghost style={{ margin: '10px' }} >三角形</Button>
      </div>
                  </Carousel>
                  <b style={{ color: '#fff' }}>形状</b>
                  <div style={{ width: '100%', height: '100px' }}>
                  <svg id='mySvg' width="100" height="100">  
  <rect width="50" height="50" x="25" y="25" fill="blue" />  
</svg>
                    {/* 圆形 */}
                    {/* <div className="circle"> </div>  */}
                    {/* 横线 */}
                    {/* <div><hr className='custom-divider' /></div>  */}
                    {/* 三角形 */}
                  </div>
                   <div style={{ width: '100%', height: '120px',marginTop:'40px' }}>
                    <div style={{width:'100%',height:'20px',color:'#fff'}}>图片</div>
                  <Carousel dots={false} style={{width:'100%',height:'100px'}} arrows infinite={false}>
                    <div style={{ width: '100%', height: '100px',float:'left'}}>
                      <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 10px'}} src='https://media-public.canva.cn/TsC8A/MAEuGzTsC8A/1/tl.jpg' />
                      <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 5px'}} src='https://media-public.canva.cn/Kqy8o/MAEb1QKqy8o/1/tl-1.jpg' />
      </div>
      <div>
                  <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 10px'}} src='https://media-public.canva.cn/xZu_k/MAEb0rxZu_k/1/tl-1.jpg' />
                      <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 5px'}} src='https://media-public.canva.cn/xE0p8/MAEiB8xE0p8/1/tl.jpg' />
      </div>
      <div>
        <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 10px'}} src='https://media-public.canva.cn/MAC3b53etvA/1/thumbnail_large.jpg' />
                      <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 5px'}} src='https://media-public.canva.cn/7E1zM/MADw6Q7E1zM/1/thumbnail_large.jpg' />
      </div>
      <div>
        <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 10px'}} src='https://media-public.canva.cn/cLlpA/MAF2KTcLlpA/1/tl.jpg' />
                      <img style={{width:'45%',height:'70px',float:'left',margin:'10px 10px 20px 5px'}} src='https://media-public.canva.cn/LppYo/MADuyeLppYo/1/thumbnail_large.jpg' />
      </div>
    </Carousel>
          </div>
 
                  <div style={{ width: '100%', height: '300px' }}>
                  <b style={{color:'#fff'}}>AI图片生成器</b>
                    <div style={{ width: '100%', height: '88px' }}><Avatar style={{ border: '#5770EC', color: '#fff', margin: '12px', float: 'left' }} shape="square" size={64} icon={<PlusOutlined />} />
                       <b style={{ color: '#fff',float:'left',lineHeight:'88px' }}>生成自己的内容</b>
                    </div>
                    <div style={{ width: '100%', height: '88px' }}>
                      <img style={{width:'64px',height:'64px',margin: '12px',float:'left'}} src='https://static.canva.cn/web/images/42ff71c67ca9d70ac87b9b01316f9ceb.jpg' />
                      <b style={{ color: '#fff', float: 'left', lineHeight: '88px' }}>树林中有一只可爱的动画小猫</b>
                    </div>
                    <div style={{ width: '100%', height: '88px' }}>
                      <img style={{width:'64px',height:'64px',margin: '12px',float:'left'}} src='https://static.canva.cn/web/images/7dc0a727678e3d56afb09f6b03c621d0.jpg' />
                       <b style={{ color: '#fff',float:'left',lineHeight:'88px' }}>简洁的客厅中有一张绿色沙发</b>
                    </div>
                 
                </div>
                  </div>
        </div>
)
}

export default Soial